<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../User_home/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="../User_home/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../User_home/user.js"></script>
    <link type="text/css" rel="stylesheet" href="../../static/css/hemo.css">
</head>
<body>
    <div class="BlockOne">
        <span id="AvatarBlock">
            <img id="avatar" src="../User_home/default.png" data-toggle="modal" data-target="#modal">
        </span>
        <span id="information">
            <div id="username">
                USERNAME
            </div>
            <div id="introduce">
                hello friends!
            </div>
        </span>
        <div class="BtnBlock">
            <a class="BTN" style="float: left;" data-toggle="modal" data-target="#INF">
                编辑资料
            </a>
            <a class="BTN" style="float: right;">
                设置
            </a>
        </div>
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" >
            <div class="modal-dialog modal-body" role="document">
                <div class="modal-content">
                    <div id="ShowAvatar">
                        <a id="Push"> 上传头像</a>
                        <a id="Save">保存</a>
                        <input id="HiddenSubmit" type="file" style="visibility: hidden" accept="image/*"
                            onchange="ChangeAvatar()">
                    </div>

                </div>
            </div>
        </div>
        <div id="INF" class="modal fade" tabindex="-1" role="dialog" >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" >编辑资料</h4>
                    </div>
                    <div class="modal-body" id="SetInfo">
                        <label for="UserN" class="control-label">用户名:</label>
                        <input type="text" class="form-control" id="UserN">
                        <label for="sign" class="control-label">签名:</label>
                        <input type="text" class="form-control" id="sign">
                        <label for="des" class="control-label">简介:</label>
                        <input type="text" class="form-control" id="des">
                        <label for="sex" class="control-label">性别:</label>
                        <select id="Sex" class="form-control">
                            <option>未知</option>
                            <option>女</option>
                            <option>男</option>
                        </select>
                        <label for="con" class="control-label">星座:</label>
                        <input type="text" class="form-control" id="con">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal"
                                id="SaveInfo">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="BlockTwo">
        <div class="Contain1" style="float: left;">
            <div id="DATA">
                <div id="top">
                    <div id="line1">
                    </div>
                    <span class="num" id="note">
                        <div class="item">
                            笔记
                        </div>
                        <div class="item">
                            0
                        </div>
                    </span>
                    <span class="num" id="like">
                        <div class="item">
                            收藏
                        </div>
                        <div class="item">
                            0
                        </div>
                    </span>
                </div>
                <div id="bottom">
                    <div id="line2">
                    </div>
                </div>
            </div>
            
            <div id="InformationTitle">
                个人资料
            </div>
            <div id="InformationContent">
                <ul>
                    <li>
                        <span>简介:</span> <span class="Info">balabalabalabala</span>
                    </li>
                    <li>
                        <span>性别: </span> <span class="Info">未知</span>
                    </li>
                    <li>
                        <span>星座: </span> <span class="Info">未知</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="Contain2" style="float: right;">
            <div id="link">
                <a href="#" class="LinkBtn">
                    笔记
                </a>
                <a href="#" class="LinkBtn">
                    随手记
                </a>
                <a href="#" class="LinkBtn">
                    收藏
                </a>
            </div>
        </div>
    </div>
</body>
<script src="../User_home/jquery-3.5.1.js"></script>
<script src="../User_home/bootstrap/js/bootstrap.min.js"></script>
</html>